import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    path: "/",
    name: "index",
    component: HomeView,
  },
  {
    path: "/home",
    name: "home",
    component: HomeView,
    children: [
      {
        path: "/home",
        redirect: "/home/recommend",
      },
      {
        path: "recommend", // /home/recomend
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/HomeRecommend.vue"),
      },
      {
        path: "ranking", // /home/recomend
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/HomeRanking.vue"),
      },
    ],
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/login",
    name: "login",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Login.vue"),
  },
  {
    path: "/order",
    name: "order",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Order.vue"),
  },
  {
    path: "/user/:id",
    name: "user",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/User.vue"),
  },
  // 404页面
  // /:pathMatch(.*)* 解析/   变成数组

  {
    path: "/:pathMatch(.*)",
    component: () =>
      import(/* webpackChunkName: "NotFound" */ "../views/NotFound.vue"),
  },
];

const router = createRouter({
  // 指定采用的路由模式： hash
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes,
});
let isAdmin = true;
if (isAdmin) {
  // 一级路由
  router.addRoute({
    path: "/admin",
    component: () =>
      import(/* webpackChunkName: "NotFound" */ "../views/Admin.vue"),
  });
  // 二级路由
  router.addRoute("home", {
    path: "vip",
    component: () =>
      import(/* webpackChunkName: "NotFound" */ "../views/Vip.vue"),
  });
} else {
  // 删除路由
  router.removeRoute("admin");
}
// 2.路由导航守卫
// 进行任何的路由跳转之啦传入的beforeEach 中的西数部会英回调
router.beforeEach((to, from) => {
  console.log(to, from, "beforEach函数被回调");
  // if(to.path !== "/login"){

  //   return "/login"
  // }
  // 进入到订单页面,判断用户是否登录
  const token = localStorage.getItem("token");
  if (!token && to.path === "/order") {
    return "/login";
  }

  // 导航解析流程
  // 我们一起来看一下完整的导航解析流程:
  // 口导航被触发。
  // 口在失活的组件里调用 beforeRouteLeave守卫
  // 口 调用全局的 beforeEach 守卫
  // 口在武用的组件里调用 beforeRouteUpdate守卫(2.2+)
  // 口在路由配置里调用 beforeEnter。
  // 口 解析异步路由组件。
  // 口在被激活的组件里调用 beforeRouteEnter。
  // 口调用全局的 beforeResolve守卫(2.5+)
  // 口导航被确认。
  // 口调用全局的afterEach 钩子
  // 口触发DOM更新
  // 口调用 beforeRouteEnter守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
});
export default router;
